<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />


    <style>
        #float {
            width: 50px;
            height: 50px;
            background-color: red;
            float:right
        }
    </style>
</head>

<body>

    <h1>CSS Float(浮动)</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.runoob.com/css/css-float.html">CSS Float(浮动)</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_positioning_floating.asp">CSS 浮动</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/cssref/pr_class_float.asp">CSS float 属性</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。</p>

    <h2>可能取值</h2>
    <ul>
        <li><strong>left</strong> 元素向左浮动。</li>
        <li><strong>right</strong> 元素向右浮动。</li>
        <li><strong>none</strong> 默认值。元素不浮动，并会显示在其在文本中出现的位置。</li>
        <li><strong>inherit</strong> 规定应该从父元素继承 float 属性的值。</li>
    </ul>


    <h2>示例</h2>

    <h3>示例效果</h3>
    <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
    <p>
        <div id="float"> </div>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <h3>具体代码</h3>

    <pre>
&lt;p&gt;在下面的段落中，我们添加了一个样式为 &lt;b&gt;float:right&lt;/b&gt; 的图像。结果是这个图像会浮动到段落的右侧。&lt;/p&gt;
&lt;p&gt;
    &lt;div id=&quot;float&quot;&gt; &lt;/div&gt;
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
&lt;/p&gt;


#float {
    width: 50px;
    height: 50px;
    background-color: red;
    float:right
}
    </pre>

</body>

</html>